<template>
  <div>
    <div style="text-align: right">
      <el-button type="primary" @click="add">新增字典</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" label="行号" width="80" header-align="center" />
      <el-table-column prop="code" label="编码" width="180" header-align="center" />
      <el-table-column prop="name" label="名称" header-align="center" />
      <el-table-column prop="sorts" label="排序" width="120" header-align="center" />
      <el-table-column prop="createTime" label="创建时间" width="180" header-align="center" />
      <el-table-column label="操作" width="120" header-align="center">
        <template v-slot="{ row }">
          <el-button type="primary" :icon="Edit" circle @click="update(row)" />
          <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
        </template>
      </el-table-column>
    </el-table>

    <SaveOrUpdate @refreshData="init" :visible="isShow" @close="isShow = false" ref="saveUpdate"></SaveOrUpdate>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import { queryDictChild, deleteDict } from "@/api/dict.js";
import SaveOrUpdate from "./SaveOrUpdate.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Delete,
  Edit
} from '@element-plus/icons-vue';
const tableData = ref([]);
const isShow = ref(false);//是否显示新增
const saveUpdate = ref();
//定义属性
const props = defineProps({
  pid: {
    type: Number,
    required: true
  }
});


function update(row) {
  isShow.value = true;
  saveUpdate.value.init(props.pid, row);
}

function add() {
  isShow.value = true;
  saveUpdate.value.init(props.pid);
}

async function del(id) {
  ElMessageBox.confirm(
    '你确定要删除吗？',
    'Warning',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      //确定 后删除
      console.log(id);
      deleteDict(id).then(res => {
        if (res.code == 200) {
          ElMessage.success("删除成功")
          init();
        }
      });
    })
    .catch(() => { });
}
async function init() {
  let res = await queryDictChild(props.pid);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}
onBeforeMount(() => {
  init();
})
</script>

<style scoped>

</style>
